<!--注册界面-->

<template>
  <div class="page-container">
    <!-- 顶部栏 -->
    <header class="header">

      <div class="project-name">
<!--        <img src="@/assets/img_1.png"  style="width: 30px; position: relative; top: 8px;margin-right: 0px">-->
        某某招标报名系统</div>
      <el-button type="text" class="login-button" @click="goToLogin">登录</el-button>
    </header>
    <!-- 表单内容 -->
    <div class="register-container">
      <div class="header" style="justify-content: center">
        <h3>企业注册</h3>
      </div>
      <el-form :model="form" ref="form" :rules="rules" label-width="120px" class="form-content" style="margin-top: 20px;">
        <el-form-item label="社会信用代码" prop="creditCode">
          <el-input v-model="form.form1.creditCode" placeholder="请输入社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="注册人" prop="contactPerson">
          <el-input v-model="form.form1.contactPerson" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item label="注册人身份" prop="companyRole">
          <el-radio-group v-model="form.form1.companyRole">
            <el-radio-button :label="'供应商'" :value="'经销商'">供应商</el-radio-button>
            <el-radio-button :label="'代理公司'" :value="'经销商'">代理公司</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码" prop="contactPhone" >
          <el-input v-model="form.form1.contactPhone" placeholder="请输入联系人手机号码"></el-input>
        </el-form-item>
        <el-form-item label="注册账号" prop="username">
          <el-input v-model="form.form2.username" placeholder="请输入登录账号，密码默认为123456"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="contactEmail">
          <el-input v-model="form.form1.contactEmail" placeholder="请输入联系人邮箱"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="departmentName">
          <el-input v-model="form.form1.departmentName" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="公司类型" prop="companyType">
          <el-radio-group v-model="form.form1.companyType">
            <el-radio-button :label="'经销商'" :value="'经销商'">经销商</el-radio-button>
            <el-radio-button :label="'厂家'" :value="'厂家'">厂家</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公司法人名称" prop="legalRepresentative">
          <el-input v-model="form.form1.legalRepresentative" placeholder="请输入公司法人名称"></el-input>
        </el-form-item>
        <el-form-item label="单位联系电话" prop="contactPhone">
          <el-input v-model="form.form1.contactPhone" placeholder="请输入单位联系电话"></el-input>
        </el-form-item>
        <el-form-item label="单位邮箱" prop="contactEmail">
          <el-input v-model="form.form1.contactEmail" placeholder="请输入单位邮箱"></el-input>
        </el-form-item>
        <el-form-item label="上传公司营业执照" prop="businessLicense">
          <el-upload
              :action="'http://'+serverIp() + ':8081/jdyfy/file/upload'"
              :on-success="handleFileUploadSuccess1"
              :on-error="handleFileUploadError"
              :show-file-list="true"
              accept="*/*"
              :limit="1"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">请上传不超过50mb的文件，只能上传一个文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传公司医疗经营许可证" prop="medicalLicense">
          <el-upload
              :action="'http://'+serverIp() + ':8081/jdyfy/file/upload'"
              :on-success="handleFileUploadSuccess2"
              :on-error="handleFileUploadError"
              accept="*/*"
              :limit="1"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">请上传不超过50mb的文件，只能上传一个文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="医疗经营许可等级" prop="medicalLicenseLevel">
          <el-select v-model="form.form1.medicalLicenseLevel" placeholder="请选择等级">
            <el-option :label="'I类医疗器械经销商'" :value="'I类医疗器械经销商'"></el-option>
            <el-option :label="'Ⅱ类医疗器械经销商'" :value="'Ⅱ类医疗器械经销商'"></el-option>
            <el-option :label="'Ⅲ类医疗器械经销商'" :value="'Ⅲ类医疗器械经销商'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {addDepartment} from "@/api/department";
import {addUser, getUserById} from "@/api/user";
import {serverIp} from "../../../../public/config.js";

export default {
  data() {
    return {
      form: {
        form1: {
          creditCode: '', // 社会信用代码
          companyRole: '', // 公司身份
          departmentName: '', // 科室/企业名称
          companyType: '', // 公司类型 (经销商，厂家)
          companyEmail: '', // 公司邮箱
          medicalLicenseLevel: '', // 医疗经营许可等级
          userId: '',
        },
        form2: {
          name: '', // 法人
          username: '', // 注册账号
          password: '', //密码
          phoneNumber: '', // 联系电话
          email: '', // 邮箱
          status: 1,
          roleId: '3', //角色id (1管理员,2,项目负责人3供应商,4主管)
        },
        file1: '', //营业执照
        file2: '', //医疗经营许可证
      },
      // rules: {
      //   creditCode: [
      //     { required: true, message: '请输入社会信用代码', trigger: 'blur' },
      //   ],
      //   departmentName: [
      //     { required: true, message: '请输入公司名称', trigger: 'blur' },
      //   ],
      //   companyPhone: [
      //     { required: true, message: '请输入联系电话', trigger: 'blur'},
      //   ],
      //   companyEmail: [
      //     { required: true, message: '请输入单位邮箱', trigger: 'blur' },
      //   ],
      //   legalRepresentative: [
      //     { required: true, message: '请输入公司法人名称', trigger: 'blur' },
      //   ],
      //   contactPhone: [
      //     { required: true, message: '请输入联系电话', trigger: 'blur' },
      //   ],
      //   contactEmail: [
      //     { required: true, message: '请输入联系人邮箱', trigger: 'blur' },
      //   ],
      //   businessLicense: [
      //     { required: true, message: '请上传营业执照', trigger: 'blur' },
      //   ],
      //   medicalLicense: [
      //     { required: true, message: '请上传医疗经营许可证', trigger: 'blur' },
      //   ],
      //   medicalLicenseLevel: [
      //     { required: true, message: '请选择医疗经营许可等级', trigger: 'blur' },
      //   ],
      //   contactPerson: [
      //     { required: true, message: '请输入联系人姓名', trigger: 'blur' },
      //   ],
      //   username: [
      //     { required: true, message: '请输入登录用户名', trigger: 'blur' },
      //   ],
      // },
    };
  },
  watch: { // 监听(观察者)
    // 监控 departmentName 的变化
    'form.form1.departmentName'(newValue) {
      // 更新 uploadData1 中的 departmentName
      this.form.uploadData1.departmentName = newValue;
    }
  },
  methods: {
    serverIp() {
      return serverIp
    },
    submitForm() { // 提交表单
      this.$refs.form.validate(async (valid) => { // 表单验证
        if (valid) {
          this.form.form2.name = this.form.form1.contactPerson
          this.form.form2.phoneNumber = this.form.form1.contactPhone
          this.form.form2.email = this.form.form1.contactEmail
          this.form.form2.department = this.form.form1.departmentName
          const userResponse = await addUser(this.form.form2).then(res => { //添加用户
            if (res) {
              this.$message.success('添加用户信息成功')
            } else {
              this.$message.error('添加用户信息失败')
            }
            return res;
          });
          if (userResponse.userId) { //用户添加成功后才添加企业，如果用户已存在需要重新填写注册信息
            this.form.form1.username = userResponse.username;
            this.form.form1.businessLicense = this.file1
            this.form.form1.medicalLicense = this.file2
            addDepartment(this.form.form1).then(res => {
              if (res) {
                this.$message.success('企业添加成功')
              } else {
                this.$message.error('企业添加失败')
              }
            });
          }

        } else {
          return false;
        }
      });
    },
    goToLogin() { // 跳转到登录页面
      this.$router.push('/login');
    },
    handleFileUploadSuccess1(file) { this.file1 = file; },
    handleFileUploadSuccess2(file) { this.file2 = file; },
    handleFileUploadError(){ this.$message.error('文件上传失败，请重试'); },
  }
};
</script>


<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.project-name {
  font-size: 18px;
  font-weight: bold;
}

.login-button {
  font-size: 16px;
  color: #409eff;
}

.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 600px;
}

.form-content {
  width: 100%;
}
</style>
